<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <link rel="stylesheet" type="text/css" href="./index.css"></link>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <link rel='shortcut icon' href='https://soo.run/q6f2m' type='image/x-icon'/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
        <script type="text/javascript" src="./config.js" ></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js'></script>
        <title>Git Cheat Sheet</title>
    </head>
    <body>
        <div id='app'></div>
    </body>
</html>

<script type='text/javascript'>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                successStatus: false,
                failStatus: false
            };
        },
        template: `
            <div class="container">
                <h1>
                    Git Cheat Sheet
                    <sub class="sub">Tips：点击对应命令即可复制！</sub>
                    <div class="author">
                        <a href="https://yaolifeng.com" target="__blank">作者：Immerse (姚利锋)</a>
                        <a href="https://yaolifeng.com/sponsor.html" target="__blank">
                            <img class="sponsor" src="https://qncdn.mopic.mozigu.net/work/143/25/22b05fc4df8a4210/微信图片_20250526155807.png"/>
                        </a>
                    </div>
                </h1>
                <div class="save" @click="save">
                    <img src="https://foruda.gitee.com/images/1669297856012100235/b301c32f_8093340.png" class="download"/>
                    保存为图片
                </div>
                <div class="list">
                    <div class="singer" v-for="(item,index) in Object.keys(objData)" :key="index">
                        <div class="out">
                            <h3>{{item}}</h3>
                            <div class="item" v-for="(itemVal,indexVal) in objData[item]" :key="indexVal">
                                <h4 class="key">{{itemVal.key}}：</h4>
                                <span class="value" title="点击复制">
                                    <code>$ <code id="btn" @click="copy(itemVal.value)">{{itemVal.value}}</code></code>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tip success" id="tips" v-if="successStatus">
                    <img src="https://foruda.gitee.com/images/1669298007869811371/66180bf1_8093340.png" class="success_icon"/>
                    复制成功
                </div>
                <div class="tip fail" id="tips" v-if="failStatus">
                    <img src="https://foruda.gitee.com/images/1669297915967660427/357473dd_8093340.png" class="success_icon"/>
                    复制失败
                </div>
            </div>
        `,
        methods: {
            async copy(text){
                try {
                    await this.copyTextToClipboard(text)
                    this.successStatus = true;
                    setTimeout(() => {
                        this.successStatus = false;
                    }, 1000);
                } catch (error) {
                    this.failStatus = true;
                    setTimeout(() => {
                        this.failStatus = false;
                    }, 1000);
                }
            },
             /**
             * 将文本复制到剪贴板的通用函数。
             * 优先使用 navigator.clipboard API，如果不可用或失败，则回退到 document.execCommand。
             * @param {string} textToCopy 要复制的文本。
             * @returns {Promise<string>} Promise 在成功时 resolve，包含成功信息；在失败时 reject，包含错误对象或错误信息字符串。
             */
            async copyTextToClipboard(textToCopy) {
                // 检查 navigator.clipboard 是否可用 (通常需要在安全上下文 HTTPS 或 localhost)
                if (navigator.clipboard && window.isSecureContext) {
                    try {
                        await navigator.clipboard.writeText(textToCopy);
                        return Promise.resolve("文本已使用 Clipboard API 成功复制!");
                    } catch (err) {
                        console.warn("使用 Clipboard API 复制失败，尝试备用方法...", err);
                        // 如果 Clipboard API 失败 (例如权限问题，或文档非焦点状态)，尝试备用方法
                        return fallbackCopyText(textToCopy);
                    }
                } else {
                    console.warn("Clipboard API 不可用或不在安全上下文中，使用备用方法。");
                    // Clipboard API 不可用，直接使用备用方法
                    return fallbackCopyText(textToCopy);
                }
            },

            /**
             * 使用 document.execCommand 作为备用方法复制文本。
             * @param {string} text 要复制的文本。
             * @returns {Promise<string>} Promise 在成功时 resolve，包含成功信息；在失败时 reject，包含错误对象或错误信息字符串。
             */
            fallbackCopyText(text) {
                return new Promise((resolve, reject) => {
                    const textArea = document.createElement("textarea");
                    textArea.value = text;

                    // 将 textarea 移到屏幕外并使其不可见，以避免页面滚动或视觉干扰
                    textArea.style.position = "fixed";
                    textArea.style.top = "-9999px";
                    textArea.style.left = "-9999px";
                    textArea.style.opacity = "0"; // 或者 textArea.style.display = "none"; 但 focus 可能有问题

                    document.body.appendChild(textArea);
                    textArea.focus(); // 确保元素获得焦点才能执行 select
                    textArea.select(); // 选择 textarea 中的文本

                    try {
                        const successful = document.execCommand('copy');
                        if (successful) {
                            resolve("文本已使用备用方法成功复制!");
                        } else {
                            console.error("备用方法：document.execCommand('copy') 返回 false。");
                            reject("备用方法复制失败：命令未成功执行。");
                        }
                    } catch (err) {
                        console.error("备用方法复制时出错:", err);
                        reject(new Error("备用方法复制时发生错误: " + err.message));
                    } finally {
                        // 无论成功与否，都从 DOM 中移除临时 textarea
                        if (document.body.contains(textArea)) {
                            document.body.removeChild(textArea);
                        }
                    }
                });
            },
            save(){
                window.open('https://foruda.gitee.com/images/1669297926951986891/cd4342f0_8093340.png');
            }
        }
    });
</script>
